@charset "UTF-8";

.hue{
  color: #ff9344;
}
.web header{
  position: absolute;
  top: 0;
  left: 0;
  .box{
    width: 100vw;
    height: 20vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    .logo h1{
      width: 16vw;
      height: 16vw;
      overflow: hidden;
      a img{
        width: 100%;
      }
    }
    .search{
      position: relative;
    }
    .search input{
      width: 35vw;
      height: 7vw;
      border: 1px solid #ff9344;
      border-radius: 3vw;
      box-sizing: border-box;
    }
    .search span{
      position: absolute;
      right: .5vw;
      top: 1.2vw;
    }
    .city{
      position: relative;
    }
    .city span{
      position: absolute;
      left: 15vw;
      top: 1vw;
      color: #ff9344;
    }
    .city select {
      width: 21vw;
      height: 7vw;
      text-align: center;
      appearance: none;
      border: 1px solid #ff9344;
      box-sizing: border-box;
    }
  }
}

.web header .box .back{
  border: 1px solid #ff9344;
  border-radius: 2vw;
  width: 16vw;
  height: 8vw;
  text-align: center;
  span{
    line-height: 8vw;
  }
}
.web header .box .my{
  width: 20vw;
  height: 3vw;
}
.web header .box .email{
  span{
    font-size: 10vw;
  }
}

.web footer{
  .menu{
    position: absolute;
    bottom: 0;
    left: 0;
    .box{
      background-color: white;
      width: 100vw;
      height: 17vw;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .home a{
        font-size: 10vw;
        color: #ff9344;
      }
    }
  }
}